<svg width="400" height="600">
  <defs>
    <pattern id="GravelPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" 
    height="67" viewBox="0 0 100 67">
      <image x=0 y=0 width=100 height=67 xlink:href="gravel.jpg"/>
    </pattern>

    <linearGradient id="TrunkGradient">
      <stop offset="0%" stop-color="#630"/>
      <stop offset="40%" stop-color="#960"/>
      <stop offset="100%" stop-color="#520"/>
    </linearGradient>

    <rect x="-5" y="-50" width=10 height=50 id="Trunk"/>
    <path d="M-25,-50
     L-10,-80
     L-20,-80
     L-5,-110
     L-15,-110
     L0,-140
     L15,-110
     L5,-110
     L20,-80
     L10,-80
     L25,-50
     Z"
     id="Canopy"/>

    <linearGradient id="CanopyShadow" x=0 y=0 x2=0 y2=100%>
      <stop offset="0%" stop-color="#000" stop-opacity=".5"/>
      <stop offset="20%" stop-color="#000" stop-opacity="0"/>
    </linearGradient>

    <g id="Tree">
      <use Xlink:href="#Trunk" fill="url(#TrunkGradient)"/>
      <use Xlink:href="#Trunk" fill="url(#CanopyShadow)"/>
      <use Xlink:href="#Canopy" fill="none" stroke="#630" stroke-linejoin="round" stroke-width="4px"/>
      <use Xlink:href="#Canopy" fill="#390" stroke="none"/>
    </g>
  </defs>

  <g transform="translate(-10,350)"
    stroke="url(#GravelPattern)" 
    stroke-linejoin="round" 
    stroke-width="20">
    <path d="M0,0 Q170,-50 260, -190 Q310, -250 410,-250" fill="none"/>
  </g>

  <text y=60 x=200 font-family="impact" font-size="60px" fill = "#960" text-anchor="middle">
    Happy Trails
  </text>
  <text y=90 x=200 font-family="impact" font-size="20px" fill = "#960" text-anchor="middle" id="TreeCounter"></text>

  <text y=420 x=200 font-family="impact" font-size="60px" fill = "#960" text-anchor="left">
    <tspan>YOU can remove a</tspan>
    <tspan y=440 x=20>tree by click on it</tspan>
  </text>

  <use Xlink:href="#Tree" transform="translate(130,250)"/>
  <use Xlink:href="#Tree" transform="translate(260,500) scale(2)"/>
</svg>